<template>
  <div>
    <h3>商品分类</h3>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 添加分类按钮区域 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddDialog">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 分类表格  -->
      <tree-table
        :data="cateList"
        :columns="columns"
        :expand-type="false"
        show-index
        index-text="#"
        :show-row-hover="false"
        :selection-type="false"
        border
      >
        <template slot="cat_deleted" slot-scope="{ row }">
          <i
            class="el-icon-success"
            style="color: green"
            v-if="!row.cat_deleted"
          ></i>
          <i class="el-icon-error" style="color: red" v-else></i>
        </template>
        <template slot="cat_level" slot-scope="{ row }">
          <el-tag size="mini" v-if="row.cat_level === 0">一级</el-tag>
          <el-tag size="mini" type="success" v-else-if="row.cat_level === 1"
            >二级</el-tag
          >
          <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <template slot="opt">
          <el-button type="primary" size="mini" icon="el-icon-edit"
            >编辑</el-button
          >

          <el-button type="danger" size="mini" icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </tree-table>
      <!-- 页码条 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pagenum"
        :page-sizes="[2, 3, 5, 8, 10]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 分页 -->
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog
      title="新增分类"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="handleAddDialogClose"
    >
      <!-- 新增表单 -->
      <el-form
        ref="addFormRef"
        :model="addForm"
        :rules="addRules"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader
            v-model="selectedKeys"
            :options="parentCateList"
            :props="{
              expandTrigger: 'hover',
              checkStrictly: true,
              label: 'cat_name',
              value: 'cat_id',
            }"
            style="width: 100%"
            clearable
            @change="handleCascaderChange"
          ></el-cascader>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 商品分类数据列表
      cateList: [],
      // 查询分类数据的条件
      queryData: {
        type: 3,
        pagenum: 1,
        pagesize: 10
      },
      // 保存总数据条数
      total: 0,
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          type: 'template',
          template: 'cat_deleted'
        },
        {
          label: '排序',
          prop: 'cat_level',
          type: 'template',
          template: 'cat_level'
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt'
        }
      ],
      addDialogVisible: false, // 是否显示新增对话框
      addForm: { // 表单数据对象
        cat_name: '', // 分类名称
        cat_pid: 0, // 分类的父ID
        cat_level: 0 // 分类等级
      },
      addRules: { // 表单校验规则对象
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      },
      parentCateList: [], // 商品父级分类列表
      selectedKeys: []// 选中的分类
    }
  },

  created () {
    this.getCateList()
  },

  methods: {
    // 改变级联的值触发方法
    handleCascaderChange () {
      this.addForm.cat_pid = this.selectedKeys.length === 0 ? 0 : this.selectedKeys[this.selectedKeys.length - 1]
      this.addForm.cat_level = this.selectCaseKey.length
    },
    // 是否打开添加分类对话框
    showAddDialog () {
      this.getParentCateList()
      this.addDialogVisible = true
    },
    // 异步获取商品父级分类列表
    async getParentCateList () {
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      this.parentCateList = res.data
    },

    async getCateList () {
      // 获取商品分类数据
      const { data: res } = await this.$http.get('categories', {
        params: this.queryData
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取商品列表数据失败')
      }
      // 将数据列表赋值给cateList
      this.cateList = res.data.result
      // 保存总数据条数
      this.total = res.data.total
    },

    // 设置页容量函数
    handleSizeChange (newPageSize) {
      // 将新的页码条容量，赋值给Data
      this.queryData.pagesize = newPageSize
      // 重新发送异步请求，获取当前页数据
      this.getCateList()
    },

    // 设置页码函数
    handleCurrentChange (newPageIndex) {
      // 将被点击的页码，赋值给Data
      this.queryData.pagenum = newPageIndex
      // 重新发送异步请求，获取当前页数据
      this.getCateList()
    },
    handleAddDialogClose () { // 关闭对话框事件
      this.$refs.addFormRef.resetFields()
      this.addForm = { // 表单数据对象
        cat_name: '', // 分类名称
        cat_pid: 0, // 分类的父ID
        cat_level: 0 // 分类等级
      }
      this.selectedKeys = []
    },
    addCate () { // 添加分类
    // 校验表单
      this.$refs.addFormRef.validate(async isOk => {
        // 如果校验失败，则退出函数
        if (!isOk) return false
        // 如果成功，则发送异步请求
        const { data: resBody } = await this.$http.post('categories', this.addForm)
        // 如果 添加失败，则返回
        if (resBody.meta.status !== 201) return this.$msg.error(resBody.meta.msg)
        // 如果 添加成功，则重新请求渲染列表
        this.getCateList()
        // 关闭窗口
        this.addDialogVisible = false
        // 提示消息
        this.$msg.success(resBody.meta.msg)
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
